<!--
 * @Author       : wfl
 * @LastEditors: ln
 * @description  :
 * @updateInfo   :
 * @Date         : 2022-11-02 18:15:19
 * @LastEditTime: 2023-08-10 15:31:37
-->
<script lang="ts" setup name="IkBtnLineHeight">
defineProps({
  modelValue: {
    type: String,
    default: 'default'
  },
  circle: {
    type: Boolean,
    default: true
  }
})

const emits = defineEmits<{
  (event: 'update:modelValue', size: string): void
}>()

const { t } = useConfig()

enum ESize {
  small = 'small',
  default = 'default',
  large = 'large'
}

const activeSize = ref(ESize.default)
emits('update:modelValue', activeSize.value)
const handChange = (e: MouseEvent) => {
  activeSize.value = (e?.target as any)?._value
  emits('update:modelValue', activeSize.value)
}
</script>

<template>
  <el-popover
    placement="bottom"
    popper-class="popper-class-line-height"
    :width="60"
    trigger="hover"
  >
    <template #reference>
      <el-button
        type="default"
        style="min-width: 40px; min-height: 40px"
        v-bind="$attrs"
        :circle="circle"
      >
        <template #icon>
          <i class="ik ik-line-height"></i>
        </template>
        <template v-if="!circle" #default>
          {{ t("action.lineHeight") }}
        </template>
      </el-button>
    </template>
    <ul @click="handChange">
      <li :value="ESize.small" :class="{ active: activeSize === ESize.small }">
        {{ t("line.hsmaller") }}
      </li>
      <li :value="ESize.default" :class="{ active: activeSize === ESize.default }">
        {{ t("line.hdefault") }}
      </li>
      <li :value="ESize.large" :class="{ active: activeSize === ESize.large }">
        {{ t("line.hbigger") }}
      </li>
    </ul>
  </el-popover>
</template>

<style scoped>
:deep(.iksvg) {
  text-align: center;
}

:deep(.el-button.is-circle) {
  min-width: 40px!important;
  min-height: 40px!important;
}
</style>

<style lang="scss">
.popper-class-line-height.el-popover.el-popper {
  padding: 0;
  min-width: 80px;

  ul {
    li {
      padding: var(--base-padding);
      cursor: pointer;
      transition: background-color 0.3s;

      &:hover {
        background-color: var(--el-color-primary-light-3);
        color: var(--el-color-white);
      }

      &.active {
        background-color: var(--el-color-primary);
        color: var(--el-color-white);
      }
    }
  }
}
</style>
